<template>
    <div class="a0">
        <div class="a1">

            <div class="register-login">
                <el-tabs v-model="activeTab" @tab-click="handleClick">
                    <!-- <el-tab-pane label="注册" name="register">
                        <el-form ref="registerForm" :model="registerForm" label-width="80px"
                            @submit.native.prevent="register">
                            <el-form-item label="用户名" prop="account">
                                <el-input v-model="registerForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="pwd">
                                <el-input type="pwd" v-model="registerForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="pwd">
                                <div class="flex">
                                    <el-input v-model="registerForm.code"></el-input>
                                    <el-button class="but1" type="primary" v-if="countdown > 0">{{ countdown
                                        }}秒</el-button>
                                    <el-button class="but1" type="primary" @click="startCountdown"
                                        v-else>验证码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register">注册</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane> -->
                    <el-tab-pane label="登录" name="login">
                        <el-form ref="loginForm" :model="loginForm" label-width="80px" @submit.native.prevent="login">
                            <el-form-item label="用户名" prop="account">
                                <el-input v-model="loginForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密 码" prop="pwd">
                                <el-input type="pwd" v-model="loginForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- <div class="a2">
            <iframe :src="src" frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            countdown: 0,
            activeTab: "login",
            registerForm: {
                account: "",
                pwd: "",
                code: "",
            },
            loginForm: {
                account: "",
                pwd: "",
            },
            src: '',
        };
    },
    methods: {
        startCountdown() {
            // 1是注册验证码，2是登陆验证码
            let param = {
                email: this.registerForm.account
            }
            this.$axios.post('http://localhost:8080/user/registCode', param,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('response', response);
                    if (response.data.errorMsg) {
                        this.$message.error(response.data.errorMsg);
                    } else {
                        this.$message.success('发送成功');
                        if (this.countdown === 0) {
                            this.countdown = 60;
                            const timer = setInterval(() => {
                                this.countdown--;
                                if (this.countdown === 0) {
                                    clearInterval(timer);
                                }
                            }, 1000);
                        }
                    }
                })
                .catch(error => {
                    console.log('error', error);
                });

        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        register() {
            console.log("注册信息：", this.registerForm);
            // 在这里添加注册逻辑
            this.$axios.post('http://localhost:8080/user/reg', this.registerForm,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('response', response);
                    if (response.data.errorMsg) {
                        this.$message.error(response.data.errorMsg);
                    } else {
                        this.$message.success('注册成功');
                        this.$router.push('/data1');
                    }
                })
                .catch(error => {
                    console.log('error', error);
                });
        },
        login() {
            console.log("登录信息：", this.loginForm);
            // 在这里添加登录逻辑
            this.$axios.post('http://localhost:8080/user/login', this.loginForm,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('response', response);
                    if (response.data == null || response.data == '') {
                        this.$message.error('登陆失败');
                    } else {
                        this.$message.success('登陆成功');
                        this.$router.push('/data1');
                        localStorage.setItem('token', response.data.id);
                        // localStorage.removeItem('token'); // 删除缓存
                        console.log(localStorage.getItem('token')); //读取缓存
                    }
                })
                .catch(error => {
                    console.log('error', error);
                });
        },
    },
    mounted: function () {
        if (localStorage.getItem('token') != null) {
            this.$router.replace('/data1');
        }
    },
};
</script>

<style scoped>
.but1 {
    widows: 20%;
    margin-left: 10px;
}

.flex {
    display: flex;
}

.a1 {
    width: 300px;
    margin: 0 auto;
    padding: 50px;
    border: solid 1px rgb(214, 212, 212);
    border-radius: 5px;
    background: linear-gradient(to right, #beeff0, #d7e291);
    /* 设置渐变背景色 */
}

.register-login {
    width: 300px;
    margin: 0 auto;
}
</style>